<!DOCTYPE html>
<meta charset="UTF-8">
<title>Title</title>
<!--引入vue.js-->
<script src="js/vue.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<!--一定要先引入vue.js再引入index.js因为elementui是基于vue.js实现的,如果不先引入vue.js elementui的js无用-->
<script src="element-ui/lib/index.js"></script>
<!--导入axios-->
<script src="js/axios-0.18.0.js"></script>


</head>
<body>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>
<div id="app">
    <el-container>
        <el-header style="font-size:40px;">
            -----------------------实验报告上传系统-----------------------
            <el-button type="info" size="mini" round @click="logout">退出登录</el-button>

        </el-header>

        <el-container>
            <el-aside width="200px">
                <!--左侧导航栏-->
                <el-menu :default-openeds="['1', '3']">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>Welcome</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1" @click="ToStuHome">个人主页</el-menu-item>
                            <el-menu-item index="1-2" @click="selectHomeWorkByPage">查看作业项目</el-menu-item>
                            <el-menu-item index="1-2" @click="ToSelectCourse">选课</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>

            <el-main>
                <!--查查看作业对话框表格-->
                <el-dialog title="查看作业" :visible.sync="updateDialogFormVisible">
                    <el-table :data="LookTableData" border>

                        <el-table-column prop="id" label="作业号" width="80">
                        </el-table-column>
                        <el-table-column prop="teacherName" label="作业发布人" width="100">
                        </el-table-column>
                        <el-table-column prop="name" label="作业项目名" width="100">
                        </el-table-column>
                        <el-table-column prop="description" label="作业描述" width="240">
                        </el-table-column>
                    </el-table>

                    <!--回显上传文件的表格-->
                    <el-table :data="stuFileTableData" border>
                        <el-table-column prop="homeWorkId" label="作业号" width="80">
                        </el-table-column>
                        <el-table-column prop="name" label="文件名" width="240">
                        </el-table-column>
                        <el-table-column  label="操作">
                            <template slot-scope="scope">
                                <el-link :href="'download/?openStyle=attachment&homeWorkId='+scope.row.homeWorkId+'&sno='+scope.row.sno">
                                    <el-button type="primary" plain >下载</el-button>
                                </el-link>
                                <el-link :href="'download/?openStyle=inline&homeWorkId='+scope.row.homeWorkId+'&sno='+scope.row.sno">
                                    <el-button type="success" plain >预览</el-button>
                                </el-link>

                                <el-button type="danger" plain @click="deleteHandle(scope.row.homeWorkId,scope.row.sno)" plain >
                                    删除</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                    <!--上传文件表单-->
                    <el-form :model="uploadForm">
                        <h3>上传文件</h3>
                        <el-form-item >
                            <el-upload
                                    class="upload-demo"
                                    action="/upload"
                                    :on-success="uploadSuccess"
                                    :before-upload="handleBeforeUpload"
                                    accept=".pdf"
                                    multiple
                                    :limit="3"
                                    :file-list="fileList">
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传.pdf文件，且不超过8MB!</div>
                            </el-upload>
                        </el-form-item>
                        <div slot="footer" class="dialog-footer"></div>

                    </el-form>

                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary"  @click="updateDialogFormVisible=false">返 回</el-button>
                        <el-button type="success" @click="saveStuFile">提交作业</el-button>
                    </div>
                </el-dialog>

                <!--条件查询表单-->
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <!--所属课程-->
                    <el-form-item label="课程" label-width="120px" prop="searchForm.courseId" align="left">
                        <el-select
                                v-model="searchForm.courseId"
                                placeholder="请选择课程"
                        >
                            <el-option v-for="(item,index) in CourseTableData" :key="index" :label="item.cname" :value="item.cno" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="作业项目名">
                        <el-input v-model="searchForm.name" placeholder="作业项目名"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="selectHomeWorkByCodition">查询</el-button>
                    </el-form-item>
                </el-form>
                <!--表格-->
                <el-table :data="homeworkTableData" border>

                    <el-table-column prop="id" label="作业号" width="120">
                    </el-table-column>
                    <el-table-column prop="name" label="作业项目名" width="120">
                    </el-table-column>
                    <el-table-column prop="cname" label="适用课程" width="120">
                    </el-table-column>
                   <!-- <el-table-column prop="className" label="适用班级" width="120">
                    </el-table-column>-->
                    <el-table-column prop="description" label="作业描述" width="240">
                    </el-table-column>

                    <el-table-column  label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" plain @click="selectById(scope.row.id)">查看作业</el-button>
                            <el-button type="info" plain @click="FeedbackMessage(scope.row.id);">反馈意见</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- Pagination分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        layout="sizes,prev, pager,
                    next,jumper,total"
                        :total="total">
                </el-pagination>


            </el-main>
        </el-container>
    </el-container>

</div>

</body>
</html>

<script>

    new Vue({
        el: "#app",
        data: {
            CourseTableData:[],
            searchForm:{
                courseId:'',
                name:''
            },
            total:1000,
            page: 1,
            pageSize: 10,
            ClassTableData:[],
            updateDialogFormVisible: false,
            dialogFormVisible: false,
            dialogVisible: false,
            homeworkTableData: [],
            stuFileTableData: [{
                homeWorkId:'',
                sno:'',
                name:'2015200050-实验1-谢文健.txt'
            }],
            LookTableData:[ {
                /*id: 1,
                teacherName: '李老师',
                name: '实验2',
                className: '信计201',
                description: '4.20前提交'*/

            }],
            uploadForm:{
                homeWorkId:'',
                sno:'',
                studentName:'',
                name:'',
                newName:'',
                courseId:''
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize=val;
                this.selectHomeWorkByPage();
            },
            handleCurrentChange(val) {
                this.page=val;
                this.selectHomeWorkByPage();
            },
            FeedbackMessage(id){
                this.$confirm('先好好完成作业,有事课堂上问哟', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'info'
                })
            },
            delete(homeWorkId,sno){
                axios.delete("/deleteFile?homeWorkId="+homeWorkId+"&sno="+sno).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('删除成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.updateDialogFormVisible=false;
                })
            },
            deleteHandle(homeWorkId,sno){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {
                    this.delete(homeWorkId,sno);

                })

            },
            handleBeforeUpload(file){
               //1MB=1024*1024
                const is8M = file.size / 1024 / 1024 < 8;

                //限制文件上传大小
                if (!is8M) {
                    this.$message.error("上传pdf文件大小不能超过 8MB!");
                    return false
                }
            },
            uploadSuccess(res) {
                console.log("uploadForm: "+JSON.stringify(this.uploadForm))
                //注意这是element的res 直接res代表原本的res.data了
                if(res.code==1){
                    this.uploadForm=res.data;
                    this.uploadForm.homeWorkId=this.LookTableData[0].id;
                    this.uploadForm.courseId=this.LookTableData[0].courseId;

                    courseId

                    console.log("name: "+res.data.name)
                    console.log("newName: "+res.data.newName)
                    console.log("uploadForm: "+JSON.stringify(this.uploadForm))

                }else{
                    this.$message.error(res.data.msg || '操作失败')
                }
            },
            saveStuFile(){
                axios.post("/stuFiles",{...this.uploadForm}).then(res=>{
                    if (res.data.code === 1) {
                        this.$message.success('提交成功！')
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                    this.updateDialogFormVisible=false;
                })
            },
            selectStuFileByIdAndSno(){
                let student= JSON.parse(localStorage.getItem("user"));
                axios.get("/stuFiles/"+this.LookTableData[0].id+"/"+student.sno).then(res=>{
                    if(res.data.code!=1){
                        this.$message.error(res.data.msg || '记得按时提交作业哦!')
                        //this.stuFileTableData=null;//这样写调bug调到哭
                        this.stuFileTableData[0]=[];
                    } else{
                        this.stuFileTableData[0]=res.data;
                    }

                })
            },
            logout(){
                axios.get("/logout").then(res=>{
                    if (res.data.code === 1) {
                        localStorage.removeItem("user");
                        window.location.href = 'login.html';
                    } else {
                        this.$message.error(res.data.msg || '操作失败')
                    }

                })
            },
            selectById(id){
                axios.get("/homeworks/"+id).then(res=>{

                    if(res.data.code==1){
                        this.LookTableData[0]=res.data.data;
                        this.uploadForm.homeWorkId=this.LookTableData[0].id;

                        let student= JSON.parse(localStorage.getItem("user"));
                        axios.get("/stuFiles/"+this.LookTableData[0].id+"/"+student.sno).then(res=>{
                            if(res.data.code != 1){
                                this.$message.info(res.data.msg || '记得按时提交作业哦!')
                                this.stuFileTableData[0]=[];//特别注意不能赋值null,其实用用json对象就好,没必要用数组,这里属于是自讨苦吃
                                this.updateDialogFormVisible=true;
                            } else{
                                this.stuFileTableData[0]=res.data.data;
                                this.updateDialogFormVisible=true;
                            }

                        })

                    }else {
                        this.$message.error(res.data.msg || '操作失败')
                    }
                })

            },
            selectHomeWorkByCodition() {
                axios.get("/homeworks/forStudentPage?page="+ this.page+"&pageSize="+this.pageSize+"&courseId="+this.searchForm.courseId
                    +"&name="+this.searchForm.name).then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg || '操作失败')
                    } else {
                        this.total=res.data.data.total;
                        this.homeworkTableData = res.data.data.rows;
                    }

                })
            },
            selectHomeWorkByPage() {
                axios.get("/homeworks/forStudentPage?page="+ this.page+"&pageSize="+this.pageSize).then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg || '操作失败')
                    } else {
                        this.total=res.data.data.total;
                        this.homeworkTableData = res.data.data.rows;
                    }

                })
            },
            selectClass(){
                //获取班级信息
                axios.get("/class").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg || '操作失败')
                    } else {
                        this.ClassTableData = res.data.data;
                    }
                })
            },
            selectCourse() {
                axios.get("/course/forStu").then(res => {
                    if (res.data.code != 1) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.CourseTableData = res.data.data;
                    }

                })
            },
            ToStuHome() {
                window.location.href = 'stuHome.html';
            },
            ToSelectCourse(){
                window.location.href = 'selectCourse.html';

            }
        },
        mounted() {
            if(localStorage.getItem("user")==null){
                window.location.href='login.html';
            }
            this.selectHomeWorkByPage();
            this.selectClass();
            this.selectCourse();
        }
    })
</script>